﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>个人中心</title>
    <link rel="stylesheet" id="style-css" href="${request.contextPath}/statics/css/style.css" type="text/css"
          media="all">
    <link rel="stylesheet" id="lmlblog-css" href="${request.contextPath}/statics/css/lmlblog.css" type="text/css"
          media="all">
    <link rel="stylesheet" id="all-css" href="${request.contextPath}/statics/css/all.css" type="text/css" media="all">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/frame.css" type="text/css" media="all">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/extra.css" type="text/css" media="all">
    <script type="text/javascript" src="${request.contextPath}/statics/js/jquery.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/statics/js/ueditor.all.min.js"></script>
    <script async="" charset="utf-8" src="${request.contextPath}/statics/layer/layer.js"></script>
    <style type="text/css">
        img.wp-smiley,
        img.emoji {
            display: inline !important;
            border: none !important;
            box-shadow: none !important;
            height: 1em !important;
            width: 1em !important;
            margin: 0 .07em !important;
            vertical-align: -0.1em !important;
            background: none !important;
            padding: 0 !important;
        }

        .lmlblog-member-left-bg-xg li {
            text-align: center;
            height: 30px;
            color: #333;
            font-size: 16px;
        }

        .lmlblog-member-left-bg-xg li a:hover {
            color: #FF8862;
            cursor: pointer;
        }

        .S_bg2, blockquote, .W_btn_b, .W_input, .SW_fun_bg {
            background-color: #261d3b;
        }

        .send_weibo {
            background-image: none;
        }

        .send_weibo_long {
            height: auto;
            overflow: visible;
        }

        .send_weibo {
            margin: 0 0 10px 0;
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
            border-radius: 2px;
            padding: 15px 10px 10px;
            height: 140px;
            /*overflow: hidden;*/
        }

        .send_weibo .title_area {
            position: relative;
            overflow: hidden;
            height: 21px;
        }

        .clearfix {
            display: block;
        }

        .S_spetxt, a.S_ficon:hover, a:hover .S_ficon, a.current .S_ficon {
            color: #fa7d3c;
        }

        .S_error {
            color: #f00;
        }

        .S_spetxt_bg {
            background-color: #fa7d3c;
        }

        .W_btn_prev:hover, .W_btn_next:hover {
            border-color: #fa7d3c;
        }

        .W_btn_prev:hover, .W_btn_next:hover, a.S_ficon:hover, a:hover .S_ficon, a.current .S_ficon, a.S_txt1:hover, a.current .S_txt1, a.S_txt2:hover, .SW_fun:hover .S_func1 {
            text-decoration: none;
            cursor: pointer;
        }

        .S_ficon_dis, a.S_ficon_dis:hover, a:hover .S_ficon_dis {
            cursor: default;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

        .WB_timeline .current em {
            color: #fff;
        }

        .send_weibo {
            background-image: none;
        }

        .WB_miniblog {
            padding-top: 50px;
        }

        .S_page .WB_miniblog {
            padding-top: 50px;
        }

        .S_page .WB_frame {
            background-color: transparent !important;
        }

        #js_skin_public_base {
            height: 42px;
        }

        body, .S_page {
            background-color: #b4daf0;
            /*background-image: url("images/body_repeat.png?id=1414052827385");*/
            background-repeat: repeat-x;
            background-position: center 0;
        }

        .send_weibo .ficon_swtxt {
            color: #1b7fb6;
        }

        body, legend, .W_input:focus, .S_txt1, .W_btn_b, .SW_fun .S_func1 {
            color: #333;
            text-decoration: none;
        }

        .S_txt1_bg {
            background-color: #333;
        }

        .S_txt1_br {
            border-color: #333;
        }

        .S_txt2, .W_input, .W_btn_b_disable, .W_btn_b_disable:hover {
            color: #808080;
            text-decoration: none;
        }

        .S_txt2_bg {
            background-color: #808080;
        }

        .S_txt2_br {
            border-color: #808080;
        }

        .S_ficon, .S_ficon_dis, a.S_ficon_dis:hover, a:hover .S_ficon_dis {
            color: #696e78;
        }

        .S_ficon_bg {
            background-color: #696e78;
        }

        .S_ficon_br {
            border-color: #696e78;
        }

        a, .S_link1, a.S_txt1:hover, a.current .S_txt1, a.S_txt2:hover, .SW_fun:hover .S_func1 {
            color: #eb7350;
        }

        .S_link1_bg {
            background-color: #eb7350;
        }

        .S_link1_br {
            border-color: #eb7350;
        }

        .S_bg1, .SW_fun_bg:hover, .SW_fun_bg_active {
            background-color: #f2f2f5;
        }

        .S_bg1_c {
            color: #f2f2f5;
        }

        .S_bg1_br {
            border-color: #f2f2f5;
        }

        .W_btn_cardlink, .W_btn_tag_cur, .W_btn_tag_cur:hover {
            background-color: #f2f2f5 !important;
        }

        .S_bg2, blockquote, .W_btn_b, .W_input, .SW_fun_bg {
            background-color: #fff;
        }

        .S_bg2_c {
            color: #fff;
        }

        .S_bg2_br {
            color: #fff;
            border-color: #fff;
        }

        .S_bg3 {
            background-color: #eaeaec;
        }

        .S_line1, .W_btn_prev, .W_btn_next, .W_btn_b {
            border-color: #d9d9d9;
        }

        .W_btn_b_disable, .W_btn_b_disable:hover, .W_btn_tag_cur, .W_btn_tag_cur:hover {
            border-color: #d9d9d9 !important;
        }

        .S_line1_c {
            color: #d9d9d9;
        }

        .W_btn_b_disable .S_ficon {
            color: #d9d9d9 !important;
        }

        .S_line2 {
            border-color: #f2f2f5;
        }

        .S_line2_c {
            color: #f2f2f5;
        }

        .S_line3, .W_input, .send_weibo .input, .W_btn_b:hover {
            border-color: #cccccc;
        }

        .W_input, .send_weibo .input {
            background-color: #fff;
        }

        .WB_left_nav .S_txt1, .WB_left_nav a.S_txt1:hover, .WB_left_nav .S_ficon, .WB_left_nav a:hover .S_ficon, .WB_left_nav a.S_ficon:hover {
            color: #fff;
        }

        .WB_left_nav .lev a:hover, .WB_left_nav .lev_curr, .WB_left_nav .lev_curr:hover, .WB_left_nav .levmore .more {
            background-color: #82b9dc;
            background-color: rgba(255, 255, 255, 0.2);
            *background-color: #82b9dc;
        }

        .WB_left_nav .lev_Box, .WB_left_nav fieldset {
            border-color: #82b9dc;
            border-color: rgba(255, 255, 255, 0.2);
            *border-color: #82b9dc;
        }

        .WB_frame {
            background-color: #93c5e3;
            background-color: rgba(70, 149, 194, 0.3);
            *background-color: #93c5e3;
        }

        .WB_timeline .S {
            color: #47a6d9;
            border-left-color: #47a6d9;
        }

        .WB_timeline .current em, .WB_timeline .S_dot, .W_gotop {
            background-color: #47a6d9;
        }

        .WB_miniblog {
            background: url("images/body_bg.jpg?id=201503261330") no-repeat top center;
        }

        .S_page .WB_miniblog {
            background: url("images/body_bg_page.jpg?id=201503261330") no-repeat top center;
        }

        #js_skin_skin048_skin {
            height: 42px;
        }

        .W_ficon {
            font-family: "wbficonregular" !important;
            display: inline-block;
            -webkit-font-smoothing: antialiased;
        }

        .layer_pic_list {
            width: 252px;
            overflow: hidden;
            padding: 10px 0 5px 0;
        }

        .drag_pic_list .add a {
            display: block;
            font-size: 40px;
            font-weight: bold;
            color: #ccc;
            margin-top: 25px;
        }
        .lmlblog-post-images-list {
            height: auto;
            overflow: hidden;
            margin: 10px 20px;
        }
        .lmlblog-post-images-list img {
            /*width: 95%;*/
            width: 200px;
            height: 180px;
        }
        .lmlblog-post-images-list a {
            overflow: hidden;
            position: relative;
            float: left;
            width: 31%;
            box-sizing: border-box;
            padding: 0 10px 20px;
        }

    </style>
</head>
<body>
<!-- 菜单 -->
<div class="menu-bar">
    <div class="head_content">
        <h1 class="m-logo"><a href="/"></a></h1>
        <div id="nav" class="menu-menu-1-container">
            <ul id="menu-menu-1" class="menu">
                <li class="menu-item menu-item-type-custom"><a href="${request.contextPath}/"><i class="fa fa-home"></i>
                    首页</a></li>
                <li class="menu-item"><a href="${request.contextPath}/web/praises">我赞过的</a></li>
                <li class="menu-item"><a href="${request.contextPath}/web/collects">我的收藏</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="${request.contextPath}/web/friends"><i
                        class="fa fa-comments-o"></i> 好友圈</a></li>
            </ul>
        </div>
        <span class="head_user_info">
            <ul>
                <!--<li id="head_search"><i class="fa fa-search"></i></li>-->
                <span class="not_login" style="display: none;">
                    <li id="head_login" onclick="window.location.href='${request.contextPath}/login.html'">登录</li>
                    <span class="head_login_middle">or</span>
                    <li id="head_reg" onclick="window.location.href='${request.contextPath}/register.html'">注册</li>
                </span>
                <span class="is_login" style="display: none;">
                    <li id="head_login" style="width: 100px;background-color: transparent;color:black;">
                        <span onclick="window.location.href='${request.contextPath}/web/center'" id="name"></span>
                        <span onclick="window.location.href='${request.contextPath}/logout'">&nbsp;&nbsp;&nbsp;&nbsp;退出</span>
                    </li>
                </span>

            </ul>
    </div>
    <div style="clear: both;"></div>
</div>
</div><!-- menu-bar -->
<div style="clear: both;"></div>
<div class="lmlblog-member-main" data="1">
    <div class="lmlblog-member-bg" style="background-image: none;margin-top: -25px;">
        <div class="lmlblog-member-content">
            <div class="lmlblog-member-content-list clear">
                <div class="lmlblog-member-left" style="width: 133px;">
                    <div class="lmlblog-member-left-bg-xg clear" style="width:100px;">
                        <li><a href="${request.contextPath}/web/center">个人信息</a></li>
                        <li><a href="${request.contextPath}/web/blogs">我的微博</a></li>
                        <li><a href="${request.contextPath}/web/praises">我赞过的</a></li>
                        <li><a href="${request.contextPath}/web/collects">我的收藏</a></li>
                        <li><a href="${request.contextPath}/web/friends">好友圈</a></li>
                    </div>
                </div>
                <div class="lmlblog-member-right" style="margin-right: 10px;width: 880px;">
                    <div class="lmlblog-post-list">
                        <div id="list">
                            <div class="lmlblog-posts-list words" style="background-image:url(images/058.png); " data="4197">
                                <fieldset class="layui-elem-field" style="height: 300px;">
                                    <div class="layui-field-box" style="font-size: 16px;">
                                        头像：<div  style="display: contents;">
                                                <img id="img" src="" style="width: 80px;height: 80px;">
                                                <div class="layui-upload" style="margin-top: 25px;display: contents;">
                                                    <button style="top: -14px;  position: relative;" type="button" class="layui-btn" id="test1">修改头像</button>
                                                    <input class="layui-upload-file" type="file" accept="" name="file">
                                                </div>
                                            </div><br/>

                                        email：<div id="email" style="    display: contents;"></div><br/>
                                        用户名：<div id="username" style="    display: contents;"></div><br/>
                                        昵称：<div  class="name" style="    display: contents;"></div><br/>
                                        <button style="top: 20px;  position: relative;" type="button" class="layui-btn xgxx">修改个人信息</button>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 底部 -->
<div style="clear:both"></div>
<div class="footer">
    <div class="footer_b_foot">
        <div class="footer_b_top">
        </div>
        <div class="footer_b_bottom" style="font-size: 20px;"><a href="http://www.mind-warning.top/" target="_blank">程序员实战基地 @2020-2040 &nbsp; 仿微博平台-前后端前程实战 </a></div>
    </div>
</div>
<!-- 返回顶部 -->
<a href="javascript:returnTop();" class="cd-top"></a>
<div id="addChapter" class="modal addChapterModal" style="display:none;">
    <div id="addChapterForm" style="margin-top: 20px;" class="layui-form m_t20" action="" lay-filter="addFrom">
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="yx" required placeholder="请输入邮箱" lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-inline">
                <input type="text" name="nc" required placeholder="请输入昵称" lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" name="mm" required placeholder="请输入密码" lay-verify="required"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" style="width:50%;margin-left: 130px;">
            <button class="layui-btn layui-btn-normal layui-btn-fluid save" lay-submit lay-filter="addChapter" style="background-color:#009688;width: 120px;">保存</button>
        </div>
    </div>
</div>

</div>
<script type="text/javascript">
    var sdelay = 0;

    function returnTop() {
        /*window.scrollBy(0, -100);//Only for y vertical-axis
        if (document.body.scrollTop > 0) {
            sdelay = setTimeout('returnTop()', 50);
        }*/

        window.scrollTo(0, 0);
    }
</script>

<script type="text/javascript" src="${request.contextPath}/statics/js/base.js"></script>
<script type="text/javascript" src="${request.contextPath}/statics/js/all.js"></script>
<script type="text/javascript" src="${request.contextPath}/statics/js/plupload.full.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/statics/layui/layui.js"></script>
<script>
    var is_login = false;
    var user_id = "";
    var page = 1;

    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通图片上传 - 上传更新用户头像
        var uploadInst = upload.render({
            elem: '#test1'
            ,field: 'img'
            ,url: '${request.contextPath}/web/user/image/upload'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    //$('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
               window.location.reload();
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });
    });

    //页面文档加载的时候执行的逻辑
    jQuery(document).ready(function ($) {
        get_Userinfo();

        $.fn.smartFloat = function () {
            var position = function (element) {
                var top = element.position().top, pos = element.css("position");
                $(window).scroll(function () {
                    var scrolls = $(this).scrollTop();
                    if (scrolls > top) {
                        if (window.XMLHttpRequest) {
                            element.css({
                                position: "fixed",
                                top: 50
                            });
                        } else {
                            element.css({
                                top: scrolls
                            });
                        }
                    } else {
                        element.css({
                            position: "absolute",
                            top: top
                        });
                    }
                });
            };
            return $(this).each(function () {
                position($(this));
            });
        };
        $(".lmlblog-member-left-bg-xg").smartFloat();

        $(".xgxx").click(function () {
            console.log(666);
            layer.open({
                title:'修改个人信息',
                type: 1,
                offset:'100',
                area: ['378px', '300px'],
                content: $('#addChapter'),
                success:function(){

                }
            });
        });

        $(".save").click(function () {
             var yx =  $("input[name='yx']").val();
             var nc =  $("input[name='nc']").val();
             var mm =  $("input[name='mm']").val();
             $.ajax({
                url: "${request.contextPath}/web/user/info/update",
                type: "POST",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify({name: nc, password:mm, email:yx}),
                dataType: "json",
                success: function (result) {
                    console.log(JSON.stringify(result));
                    layer.msg(result.msg);
                    if(result.code == 0){
                        setTimeout(function (res) {
                            window.location.reload();
                        },1000);
                    }
                },
                error: function (msg) {
                    console.log(msg);
                }
            });
        });

        $("#xgmm").click(function (res) {
            if (!is_login) {
                layer.msg("请先登录,再操作!");
                return;
            }
            var weibo = $(".W_input").val();
            if (weibo == "") {
                layer.msg("没有输入要发布的内容!");
                return;
            }
            var imgids = [];
            $(".pic").each(function(){
                imgids.push($(this).data("imgid"));
            });
            $.ajax({
                url: "${request.contextPath}/web/center/blog/send",
                type: "POST",
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify({content: weibo, imgIds:imgids.join(",")}),
                dataType: "json",
                success: function (result) {
                    layer.msg("发布成功!");
                    console.log(JSON.stringify(result));
                    setTimeout(function (res) {
                        window.location.href = "${request.contextPath}/";
                    },1000);
                },
                error: function (msg) {
                    console.log(msg);
                }
            });
        });

        $(document).on('click', '.ico_delpic',function () {
            $(this).parent().remove();
            $(".num_totla").text(Number($(".num_totla").text())-1);
            $(".num_remain").text(Number($(".num_remain").text())+1);
        });

        $(".ficon_close").click(function () {
            $(".W_layer_pop").hide();
        });
    });

    //获取当前登录用户信息
    function get_Userinfo() {
        $.get("${request.contextPath}/web/center/info/my", function (res) {
            console.log(res);
            if (res.code == 0) {
                $("#email").text(res.data.userInfo.email);
                $("#username").text(res.data.userInfo.username);
                $("#img").attr('src',res.data.userInfo.imgUrl);
                $(".name").text(res.data.userInfo.name);

                $(".is_login").show();
                $(".not_login").hide();
                $("#username").text(res.data.userInfo.username);
                $("#name").text(res.data.userInfo.name);
                $("#concernsTotal").text(res.data.concernsTotal);
                $("#fansTotal").text(res.data.fansTotal);
                $("#blogTotal").text(res.data.blogTotal);
                $("#imgUrl").attr("src", res.data.userInfo.imgUrl);
                is_login = true;
                user_id = res.data.userInfo.userId;
            } else {
                $(".is_login").hide();
                $(".not_login").show();
            }
        })
    }

</script>
</body>
</html>